<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body class="home">
    <main class="main">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg1"></div>
                <div class="swiper-slide bg2"></div>
                <div class="swiper-slide bg3"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>


        <!-- 内容区 -->
        <div class="content-box">
            <div class="ranking">
                <h3>今日排名</h3>
                <span id="rankbox">0</span>
            </div>
            <div class="clock">
                <h3>累积打卡<span id="clockday"></span>天</h3>
                <button id="clockBtn">今日打卡</button>
            </div>
        </div>
        <div class="content-box1">
            <div class="sportData">
                <h3>运动数据</h3>
            </div>
            <div class="badgesBox">
                <h3>累积运动徽章</h3>
                <span id="badgesNum"><em id="em">枚</em></span>
            </div>
        </div>
        <div class="content-box1 course">课程训练</div>
        <div class="content-box1 runBox">户外跑步</div>
    </main>

</body>
</html>